<template>
	<div style="width: 100%;height: 100%;">
		<div class="mb-10">
			选择时间：<DatePicker class="mr-10"  type='date' @on-change='startTime($event)' placeholder='Select date' style='width: 200px'></DatePicker>
			<Button type="primary"  custom-icon="iconfont icon-chaxun" size="small" @click='inQuire'>查询</Button>
		</div>
		<div style="width: 100%;height: 90%;" id="cmap"></div>
	</div>
	
</template>

<script>
	import carmapApi from '@/api/RecordsCenter/carmap.js'
	import { Message } from 'iview'
	export default {
		name: 'cmap',
		props:["routerData"],
		data() {
			return {
				
				map:null,
				lushu:null,
				drv:null,
				zoom:null,
				placename:'',
				flog:0,
				che: require('@/static/che1.png'),
				queryData:{
					
				},
				postData:{
					coordinate:['1','2']
				}
				// city:'',
			}
		},
		mounted(){
			this.startmap()
			// this.getBoundary()
		},
		methods: {
			startmap(){
				const that=this;
				this.map = new BMap.Map("cmap");
				var point = new BMap.Point(110.270263, 35.399673);
				this.map.centerAndZoom(point, 6);
					
				//启用滚轮缩放
				this.map.enableScrollWheelZoom(); 
				this.map.enableInertialDragging();
				this.map.enableContinuousZoom();
				
				that.drv = new BMap.DrivingRoute('杭州', {
				 
					onSearchComplete: function(res) {
						// console.log(res)
						if (that.drv.getStatus() == BMAP_STATUS_SUCCESS) {
							var pts = that.drv.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组
							var paths = pts.length; //获得有几个点
							var data=[]
							for (var i = 0; i < paths; i++) {
								data.push(pts[i].lng + "," + pts[i].lat)
							}
							// console.log(data)
							that.postData.coordinate=data
							// ===========
							var plan = res.getPlan(0);
							var arrPois =[];
							for(var j=0;j<plan.getNumRoutes();j++){
							    var route = plan.getRoute(j);
							    arrPois= arrPois.concat(route.getPath());
							}
							that.map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}));
							that.map.setViewport(arrPois);
							
							that.lushu = new BMapLib.LuShu(that.map,arrPois,{
							defaultContent:"",//"从
							autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
							icon  : new BMap.Icon('http://ckuser-image.oss-cn-beijing.aliyuncs.com/che1.png', new BMap.Size(52,26),{anchor : new BMap.Size(20, 10)}),
							speed: 1000,
							enableRotation:true,//是否设置marker随着道路的走向进行旋转
							landmarkPois: [
							   // {lng:116.314782,lat:39.913508},
							   // {lng:116.315391,lat:39.964429},
							   // {lng:116.381476,lat:39.974073}
							],
							})
							
							
						}else{
							alert('没有找到轨迹')
						}
						
					}
				});
			},
			startTime(e) {
			  let that = this;
			  that.queryData.startTime = e;
			},

				// 编写自定义函数,创建标注
			addMarker(point,label){
					var marker = new BMap.Marker(point);
					this.map.addOverlay(marker);
					marker.setLabel(label);
				},

			getdata(){
				let that = this;
				carmapApi.getPageList(that.queryData)
				  .then(res => {
					  // console.log('res')
						// console.log(res)  
						
						var qx=res.data[0].mapStart.split(',')[0]
						var qy=res.data[0].mapStart.split(',')[1]
						var zx=res.data[0].mapEnd.split(',')[0]
						var zy=res.data[0].mapEnd.split(',')[1]
						
						var start=new BMap.Point(qx,qy);
						var end=new BMap.Point(zx,zy);
						var label1 = new BMap.Label("起点",{offset:new BMap.Size(20,-10)});
								that.addMarker(start,label1);
						var label2 = new BMap.Label("终点",{offset:new BMap.Size(20,-10)});
								that.addMarker(end,label2);
				  })
				  .catch(error => {
				    Message.error(error)
				  })
			},
			postdata(){
				let that = this;
		
				carmapApi.postmap(that.postData)
				  .then(res => {
						// console.log(res)  
						
				  })
				  .catch(error => {
				    Message.error(error)
				  })
			},
			inQuire(){
				this.startmap()
				const that = this
				//地图中只会出现一条历史路线
				if(that.flog==1){
					that.flog=0;
					var allOverlay = that.map.getOverlays();
					for (var i = 0; i < allOverlay.length; i++){
						if(allOverlay[i].toString().indexOf("Polyline") > 0){//删除折线
							that.map.removeOverlay(allOverlay[i]);
						}
					}
				}

				this.queryData.car=this.routerData[0].licensePlate
				this.queryData.id=this.routerData[0].id

				this.postData.id=this.routerData[0].id
				this.getdata()
				var qx=this.routerData[0].mapStart.split(',')[0]
				var qy=this.routerData[0].mapStart.split(',')[1]
				var zx=this.routerData[0].mapEnd.split(',')[0]
				var zy=this.routerData[0].mapEnd.split(',')[1]
				
				var start=new BMap.Point(qx,qy);
				var end=new BMap.Point(zx,zy);
				this.drv.search(start, end);
				
			
					setTimeout(() => {
						that.lushu.start();
						this.postdata()
					},500)
				
			},
				
		},
		watch:{
			routerData(newval,oldval){
				// this.getBoundary()
				// console.log(newval)
			}
		},
		created () {
		
		}
	}
</script>

<style>

</style>
